import React from 'react';
import axios from "axios";
function fetchRequest(url){
    return fetch(url).then(value=>value.json())
}
function App(props) {
    const sendGet = async () => {
        // 1 xht
        // const xhr = new XMLHttpRequest();
        // xhr.responseType = "json";
        // xhr.open("get","http://zhangpeiyue.com/scoreList?sex=男&age=12");
        // xhr.send();
        // xhr.onload = function(){
        //     console.log(xhr.response);
        // }

        // 2 get
        // axios.get("http://zhangpeiyue.com/scoreList?sex=男&age=12")
        // axios.get("http://zhangpeiyue.com/scoreList",{
        //     params:{
        //         sex:"男",
        //         age:12
        //     }
        // }).then(value=>{
        //     console.log(value.data);
        // })

        // axios("http://zhangpeiyue.com/scoreList",{
        //     params:{
        //         sex:"男",
        //         age:12
        //     }
        // }).then(value=>{
        //     console.log(value.data);
        // })

        // axios({
        //     url:"http://zhangpeiyue.com/scoreList",
        //     params:{
        //         sex:"男",
        //         age:12
        //     }
        // }).then(value=>{
        //     console.log(value.data);
        // })


        // 3-fetch
        // 3-1:fetch是window下的属性,类型是一个方法
        // console.log(window.fetch);
        // console.log(fetch);

        // 3-2:fetch接收一个地址
        // fetch("http://zhangpeiyue.com/scoreList?age=12").then(value=>{
        //     // value.json().then(res=>{
        //     //     console.log(res);
        //     // })
        //
        //     value.text().then(res=>{
        //         console.log(res);
        //     })
        // })

        // fetch("http://zhangpeiyue.com/scoreList?age=12")
        //     .then(value=>value.json())
        //     .then(res=>{
        //         console.log(res);
        //     })

        // const value = await fetch("http://zhangpeiyue.com/scoreList?age=12");
        // const res = await value.json();
        // console.log(res);


        const res = await  fetchRequest("http://zhangpeiyue.com/scoreList?age=12");
        console.log(res);

    }

    const sendPost = ()=>{
        // xhr:http://zhangpeiyue.com/scoreList  post    application/json
        // const xhr = new XMLHttpRequest();
        // xhr.open("post","http://zhangpeiyue.com/scoreList");
        // xhr.setRequestHeader("Content-Type","application/json");
        // xhr.send(JSON.stringify({
        //     a:1,
        //     b:2
        // }));
        // xhr.onload = function(){
        //     console.log(xhr.response);
        // }


        // application/x-www-form-urlencoded
        // const xhr = new XMLHttpRequest();
        // xhr.open("post","http://zhangpeiyue.com/scoreList");
        // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        // xhr.send("userName=古天乐");
        // xhr.onload = function(){
        //     console.log(xhr.response);
        // }

        // axios: Content-Type:application/json
        // axios.post("http://zhangpeiyue.com/scoreList",{
        //     a:1,
        //     b:2
        // })

        // axios:Content-Type:application/x-www-form-urlencoded

        // axios.post("http://zhangpeiyue.com/scoreList","userName=古巨基")


        // fetch
        fetch("http://zhangpeiyue.com/scoreList",{
            method:"post",// 请求方式
            headers:{// 请求头
                "Content-Type":"application/json"
            },
            body:JSON.stringify({// 请求体
                a:100,
                b:200
            })
        }).then(value=>value.json)
            .then(res=>{
                console.log(res);// 响应体
            });
    }
    return (
        <div>
            <button onClick={sendGet}>get</button>
            <button onClick={sendPost}>post</button>
            <button>put</button>
            <button>delete</button>
            <button onClick={() => {
                const xhr = new XMLHttpRequest();
                xhr.open("PATCH", "http://zhangpeiyue.com/scoreList/1");
                xhr.setRequestHeader("Content-Type", "application/json");
                xhr.send(JSON.stringify({
                    userName: "刘德华"
                }));
            }}>patch
            </button>
        </div>
    );
}

export default App;